<template>
    <div class="user">
        <n-form :model="model">
            <n-form-item label="标签">
                <n-input v-model:value="model.name" @keydown.enter.prevent />
            </n-form-item>
            <n-form-item label="描述">
                <n-input v-model:value="model.description" @keydown.enter.prevent />
            </n-form-item>

            <n-space>
                <n-button @click="onAdd">新增</n-button>
                <n-button type="tertiary" @click="onEdit">修改</n-button>
            </n-space>
        </n-form>

        <h4 @click="onLoad">全部</h4>
        <n-space>
            <n-tag closable @close="onDel(i)" v-for="i in list" :key="i._id" @click="onShow(i)">{{ i.name }}</n-tag>
        </n-space>
    </div>

    <JTag :list="list"></JTag>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { NForm, NInput, NButton, NFormItem, NSpace, NTag, NTreeSelect } from "naive-ui";
// import { useUserStore } from "@/stores/user";
import { useTagStore } from "@/stores/tag";
import JTag from "@/components/j-tags/index.vue";
// const userStore = useUserStore();
const tagStore = useTagStore();

onMounted(() => {
    tagStore.load();
});

const onAdd = async () => {
    let param = {
        ...model.value,
        age: 12
    };
    let res = await tagStore.add(param);
    console.log(res);
    tagStore.load();
};

const onEdit = async () => {
    let param = {
        ...model.value,
        age: 12
    };
    let res = await tagStore.update(param);
    console.log(res);
    tagStore.load();
};

interface ModelType {
    _id: string;
    name: string;
    description: string;
}

const model = ref<ModelType>({
    _id: "",
    name: "",
    description: ""
});

const list = computed(() => tagStore.list);

const onDel = async (item: any) => {
    console.log(item);
    // list.value = list.value.filter(i => i != item);
    let res = await tagStore.remove(item._id);
    console.log(res);
    tagStore.load();
};

const onShow = (item: any) => {
    model.value.name = item.name;
    model.value.description = item.description;
    model.value._id = item._id;
};

const onLoad = () => {
    tagStore.load();
};
</script>
